<!--bom备料清单-->
<script setup>
import { ref, reactive, onMounted, computed } from 'vue';
import { deleteFile, getqueryBomPageList, inquireFile } from '@/server/api/biz.js';
import { downloadFile } from '@/utils/common.js';
import { useRouter } from 'vue-router';
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
const background = ref(true);
const loading = ref(true);
const query = reactive({
  parseStatus: '',
});
const selections = ref([]); // 列表选中的项目
const bomData = ref([]);
const statusList = computed(() => ({
  1: t('smt.awaitingprocessing'),
  2: t('smt.Inprogress'),
  3: t('smt.processingfailure'),
  4: t('smt.Processingsuccess'),
}));
const router = useRouter();
let total = ref(0);
let size = ref(10);
let current = ref(''); // 当前页
const dateRange = ref([]);
const data = reactive({
  statusOptions: [
    {
      label: t('mall.all'),
      value: '',
    },
    {
      label: t('smt.awaitingprocessing'),
      value: 1,
    },
    {
      label: t('smt.Inprogress'),
      value: 2,
    },
    {
      label: t('smt.processingfailure'),
      value: 3,
    },
    {
      label: t('smt.Processingsuccess'),
      value: 4,
    },
  ],
});

/**
 * 获取文件列表
 * @param {*} param
 */
const getList = () => {
  loading.value = true;
  const [startTime = '', endTime = ''] = dateRange.value || [];
  getqueryBomPageList({
    ...query,
    endTime: endTime ? `${endTime} 23:59:59` : '',
    startTime: startTime ? `${startTime} 00:00:00` : '',
    current: current.value,
    pageSize: 10,
  }).then((res) => {
    if (res.code == 200) {
      dataProcessing(res.data);
      loading.value = false;
    }
  });
};

const dataProcessing = (data) => {
  const arr = [];
  data.records.forEach((item) => {
    arr.push({
      id: item.id,
      fileName: item.fileName,
      quantity: item.quantity,
      privateInventory: item.bomMatchList != null ? item.bomMatchList[2] : 0,
      order: item.bomMatchList != null ? item.bomMatchList[1] : 0,
      mailed: item.bomMatchList != null ? item.bomMatchList[3] : 0,
      status: statusList[item.parseStatus],
      createTime: item.createTime,
      fileSerial: item.fileSerial,
      parseStatus: item.parseStatus,
      quantity: item.quantity,
      filePath: item.filePath,
    });
  });
  total.value = Number(data.total);
  // pages.value = Number(data.pages);
  size.value = Number(data.size);
  current.value = Number(data.current);
  bomData.value = arr;
};

onMounted(() => {
  current.value = 1;
  getList();
});

/**
 * 选中列表数据
 * @param {} val
 */
const handleSelectionChange = (arr) => {
  selections.value = arr;
};

/**
 * 删除选项
 */
const deleteBom = () => {
  const ids = selections.value.map((item) => item.id).join(',');
  ElMessageBox.confirm('删除的文件无法复原，确认要删除吗?', '提示', {
    confirmButtonText: t('mall.confirm'),
    cancelButtonText: t('smt.Cancel'),
    type: 'warning',
  }).then(() => {
    deleteFile({ ids }).then((res) => {
      if (res.code == 200) {
        ElMessage.success(t('mall.delete_successful'));
        handleQuery();
      } else {
        ElMessage.error(res.msg);
      }
    });
  });
};
/**
 * 导出选项
 */
const exportBom = () => {
  const [{ filePath }] = selections.value;
  ElMessageBox.confirm(t('mall.export_file_confirmation'), t('coommon.tips'), {
    confirmButtonText: t('mall.confirm'),
    cancelButtonText: t('smt.Cancel'),
    type: 'warning',
  }).then(() => {
    downloadFile(filePath);
    getList();
  });
};

/**
 * 查询
 */
const handleQuery = () => {
  current.value = 1;
  getList();
};

/**
 * 重置搜索条件
 */
const handleReset = () => {
  current.value = 1;
  query.parseStatus = '';
  query.startDate = '';
  dateRange.value = [];
  getList();
};

/**
 * 改变页数
 * @param {*} val
 */
const handleSizeChange = (val) => {
  current.value = val;
  getList();
};

/**
 * 分页
 * @param {*} val
 */
const handleCurrentChange = (val) => {
  current.value = val;
  getList();
};

// 去BOM确认
const modifyMaterialAllocation = (index, row) => {
  router.push({
    path: '/quotation',
    query: {
      bomName: row.fileName,
      fileSerial: row.fileSerial,
      num: row.quantity,
      bomFileId: row.id,
      orderListType: '2',
      bomConfirmShow: 1,
      id: row.id,
      patchNum: row.quantity,
      beforeOrderType: 'bomView',
    },
  });
};

const smtOrder = (index, row) => {
  sessionStorage.removeItem('cacheData');
  router.push({
    path: '/pricing/smt',
    // query: {
    //   bomFileId: row.id,
    //   name: row.fileName,
    //   quantity: row.quantity,
    // },
  });
};
</script>
<template>
  <div>
    <div class="mian">
      <div class="timer">
        <span> {{ $t('mall.status') }}</span>

        <el-select
          v-model="query.parseStatus"
          :placeholder="$t('mall.status')"
          size="default"
          clearable
          style="width: 200px; margin-left: 12px"
        >
          <el-option
            v-for="item in data.statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <span style="margin: 0 12px"> {{ $t('mall.creation_date') }}</span>
        <el-date-picker
          v-model="dateRange"
          value-format="YYYY-MM-DD"
          type="daterange"
          range-separator="-"
          :start-placeholder="$t('om.Startdate')"
          :end-placeholder="$t('om.Enddate')"
        />
        <div>
          <!-- <span class="text">订单时间</span>
        <el-date-picker v-model="query.startDate" type="date" placeholder="开始日期" :size="size" />
        <span class="solid"></span>
        <el-date-picker v-model="query.endDate" type="date" placeholder="结束日期" :size="size" /> -->

          <el-button class="inquires" @click="handleQuery">{{ $t('om.Search') }}</el-button>
          <el-button class="m-l-15" @click="handleReset">{{ $t('mall.reset') }}</el-button>
        </div>
      </div>
      <div class="operate">
        <!-- <el-button @click="exportBom">{{ $t('om.ExportBOM') }}</el-button> -->
        <el-button v-if="selections.length > 0" @click="deleteBom" style="width: 68px">{{
          $t('om.Deleting')
        }}</el-button>
        <el-button v-if="selections.length === 1" @click="exportBom" style="width: 68px">{{
          $t('mall.export')
        }}</el-button>
      </div>
      <div class="table">
        <el-table
          v-loading="loading"
          :data="bomData"
          border
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" />
          <el-table-column prop="fileName" :label="$t('smt.BOMInfo')" width="200">
            <template #default="scope">
              <div class="f-12">《{{ scope.row.fileName }}》</div>
              <div class="f-12">{{ scope.row.createTime }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="quantity" :label="$t('smt.Numberofpatches')" width="170" />
          <el-table-column prop="address" :label="$t('smt.PreparedComponents')">
            <el-table-column prop="privateInventory" :label="$t('smt.Privatestock')">
            </el-table-column>
            <!-- <el-table-column prop="address" label="IBE现货"> </el-table-column> -->
            <el-table-column prop="order" :label="$t('smt.IBEorderrequired')" width="170">
            </el-table-column>
            <el-table-column prop="mailed" :label="$t('smt.Tobesent')"> </el-table-column>
          </el-table-column>
          <el-table-column prop="parseStatus" :label="$t('mall.status')">
            <template #default="scope">
              <div>{{ statusList[scope.row.parseStatus] }}</div>
            </template>
          </el-table-column>
          <el-table-column fixed="right" :label="$t('smt.Operational')" width="160">
            <template #default="scope">
              <el-button
                style="display: block; margin-left: 12px; margin-bottom: 6px; min-width: 87.5px"
                type="warning"
                size="small"
                @click.prevent="modifyMaterialAllocation(scope.$index, scope.row)"
              >
                {{ $t('mall.modify') }}
              </el-button>
              <!-- <el-button type="success" size="small">
                {{ $t('om.UnlockingPrivateInventory') }}
              </el-button> -->
              <el-button
                style="display: block"
                type="primary"
                size="small"
                @click.prevent="smtOrder(scope.$index, scope.row)"
              >
                {{ $t('om.PlaceSMTorders') }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="m-16">
          <el-pagination
            v-if="total > 0"
            class="right-align"
            :background="background"
            v-model:current-page="current"
            v-model:page-size="size"
            layout="total,size, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.m-16 {
  margin-top: 16px;
}
.top {
  display: contents;
  justify-content: space-between;
  margin-bottom: 10px;
}
.f-12 {
  font-size: 12px;
  color: #383838;
}

.bottom {
  display: flex;
}
.upload-tip {
  text-align: center;
  color: #a6a6a6;
  font-size: 14px;
  &.desc {
    padding-top: 16px;
    color: var(--mall-text-color-primary);
  }
}
.downloadBom {
  text-align: center;
  color: #5255fe;
  font-size: 14px;
  cursor: pointer;
  margin-top: 20px;
}

.bom-upload {
  width: 100%;
  height: 350px;
  background-color: var(--mall-body-bg-color);
  border-radius: 8px;
  display: grid;
  justify-content: center;
  margin-top: 12px;
}
.mian {
  width: 100%;
  margin-top: 12px;

  .header {
    display: flex;
    span {
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: var(--mall-text-color-primary);
      cursor: pointer;
    }

    .active {
      color: var(--mall-color-primary);
      text-decoration: underline;
    }
  }
  .timer {
    display: flex;
    align-items: center;
    margin-top: 0px;
    span {
      margin-left: 0;
      color: var(--mall-text-color-primary);
    }
    .text {
      margin-right: 16px;
    }
    .el-input__wrapper {
      margin-left: 20px;
    }
    .inquires {
      background-color: var(--mall-color-primary);
      color: var(--mall-header-bg);
    }
    .solid {
      width: 16px;
      height: 2px;
      border-radius: 2px;
      opacity: 1;
      background: #cccccc;
      margin-right: 18px;
    }
    .el-input {
      width: 180px;
    }
    .el-button {
      margin-left: 10px;
    }
  }

  .operate {
    margin-top: 16px;
    .el-button {
      width: 140px;
      border: 1px solid var(--mall-color-primary);
      color: var(--mall-color-primary);
    }
  }

  .table {
    margin-top: 16px;
  }
}
.right-align {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
</style>
